<template>
	<gracePage :customHeader="false">
		<view slot="gBody" class="grace-body">
			<view class="grace-cz-header grace-margin-top">
				<view>
					<input type="number" class="grace-cz-phone" value="" v-model="phoneno" placeholder="请填写要充值的手机号" />
				</view>
				<view class="grace-cz-phone-address"><text class="grace-icons icon-address" style="margin-right:20rpx;"></text>陕西省 西安市</view>
			</view>
			<view class="grace-title grace-margin-top">请选择充值金额</view>
			<view class="grace-wrap grace-space-between">
				<view class="grace-cz-items" :class="[cindex == czIndex ? 'grace-cz-selected' : '']" v-for="(czitem, cindex) in items" :key="cindex" @tap="chooseItem(cindex)">
					<view :class="['grace-cz-number', cindex == czIndex ? 'grace-white' : '']">{{czitem.number}}元</view>
					<view :class="['grace-cz-price', cindex == czIndex ? 'grace-white' : '']">售价 : {{czitem.priceSell}} 元</view>
				</view>
			</view>
			<view class="grace-margin-top">
				<input type="number" class="grace-cz-input" value="" v-model="czprice" placeholder="自定义金额" />
			</view>
			<view class="grace-margin-top">
				<button type="primary" class="grace-button grace-gtbg-blue" @tap="czSubmit">充值</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
export default{
	data() {
		return {
			items:[
				{number:10,  priceSell : 9.9},
				{number:50,  priceSell : 49},
				{number:100, priceSell : 99},
				{number:200, priceSell : 195},
				{number:300, priceSell : 290},
				{number:500, priceSell : 485}
			],
			czIndex : -1,
			czprice : '',
			phoneno : ''
		}
	},
	components:{
		gracePage
	},
	methods:{
		chooseItem : function (index) {
			this.czIndex = index;
			this.czprice = this.items[index].number;
		},
		czSubmit : function(){
			console.log("充值金额 : " + this.czprice);
			console.log("充值号码 : " + this.phoneno);
		}
	}
}
</script>
<style>
.grace-cz-header{background-color:#F6F7F8; padding:25rpx; border-radius:10rpx;}
.grace-cz-phone{height:36rpx; font-size:32rpx; line-height:36rpx; background:none; border:0; width:100%; color:#5E5E5E;}
.grace-cz-phone-address{line-height:50rpx; font-size:24rpx; color:#999999; margin-top:10rpx;}
.grace-cz-items{width:170rpx; background:#F9F9F9; padding:25rpx; border-radius:10rpx;  margin-top:25rpx;}
.grace-cz-number{width:100%; text-align:center; line-height:60rpx; font-size:32rpx; color:#5E5E5E;}
.grace-cz-selected{background-color:#3688FF; color:#FFFFFF;}
.grace-cz-price{width:100%; text-align:center; line-height:36rpx; font-size:22rpx; color:#999999;}
.grace-cz-input{height:36rpx; font-size:28rpx; padding:20rpx 0; line-height:36rpx; background:none; border:0; width:100%; color:#5E5E5E; border-bottom:1px solid #F8F8F8;}
</style>